<template>
  <div class="event-view">
    {{curEvent.name}}
    <ul class="event-list">
      <li v-for="item, index of list"
          :id="'list_' + index"
          draggable='true'
          @dragstart="drag"
          @dragover="allowDrop"
          @drop="drop">{{(index + 1) + '. ' + item.name}}
      </li>
    </ul>

  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import BaseHeader from '../components/BaseHeader'

  export default {
    name: 'event-view',
    components: {BaseHeader},
    data () {
      return {
        list: [
          {id: 1, name: 'AAA'},
          {id: 2, name: 'BBB'},
          {id: 3, name: 'CCC'},
          {id: 4, name: 'DDD'}
        ]
      }
    },
    computed: {
      ...mapState({
        curEvent: state => state.event.curEvent
      })
    },
    methods: {
      ...mapActions([
        'fetchEventDetail'
      ]),
      drag (ev) {
        ev.dataTransfer.setData('dragIndex', ev.target.id.split('_')[1])
//        console.log(ev.target.id.split('_')[1])
      },
      allowDrop (ev) {
        ev.preventDefault()
        var dragIndex = parseInt(ev.dataTransfer.getData('dragIndex'))
        var overIndex = parseInt(ev.target.id.split('_')[1])
        console.log(dragIndex, overIndex)
        if (overIndex === dragIndex) return
        var targetCpt = ev.target
        var targetCptPaddingTopStr = targetCpt.style.paddingTop
        var targetCptPaddingTop = parseInt(targetCptPaddingTopStr, 10)
        if (targetCptPaddingTop === 10) return

        var listCpts = targetCpt.parentElement.children
        for (var i = listCpts.length - 1; i >= 0; i--) {
          listCpts[i].style.paddingTop = '0'
        }
        targetCpt.style.paddingTop = '30px'
      },
      drop (ev) {
        ev.preventDefault()
        var dragIndex = parseInt(ev.dataTransfer.getData('dragIndex'))
        var overIndex = parseInt(ev.target.id.split('_')[1])
        console.log(dragIndex, overIndex)
        var dragData = this.list[dragIndex]
        if (dragIndex < overIndex) {
          this.list.splice(overIndex, 0, dragData)
          this.list.splice(dragIndex, 1)
        } else if (dragIndex > overIndex) {
          this.list.splice(overIndex, 0, dragData)
          this.list.splice(dragIndex + 1, 1)
        }
        var targetCpt = ev.target
        var listCpts = targetCpt.parentElement.children
        for (var i = listCpts.length - 1; i >= 0; i--) {
          listCpts[i].style.paddingTop = '0'
        }
      }
    },
    created () {
      this.fetchEventDetail({eventId: this.$route.params.id})
    },
    mounted () {
    },
    beforeDestory () {
      console.log(1)
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/sass/variables";

  .event-view {
    padding-top: $headerHeight;
    .event-list {
      padding: 0 20px;
      margin: 0;
      li {
        border-bottom: 1px solid #ccc;
        line-height: 80px;
      }
    }
    a {
      display: block;
      width: 80%;
      margin: 20px auto;
      background-color: cornflowerblue;
      border-radius: 4px;
      color: #fff;
      text-align: center;
      font-size: 28px;
      line-height: 80px;
    }
  }

</style>
